<template>
  <div style="height: 100%; overflow: auto">
    <el-form size="small" label-width="120px" label-position="left" v-if="formField">
      <el-form-item label="组件标志" v-if="isBusiness">
        <el-input v-model="formField.BFF_DisplayName"></el-input>
      </el-form-item>
      <el-form-item label="映射属性" v-if="isBusiness">
        <el-input v-model="formField.BFF_FieldName"></el-input>
      </el-form-item>
      <el-form-item label="发起时必填" v-if="isBusiness">
        <el-checkbox v-model="formField.BFF_Require" />
      </el-form-item>
      <el-form-item label="列表中显示" v-if="isBusiness">
        <el-checkbox v-model="formField.BFF_InList" />
      </el-form-item>
      <el-form-item label="组件标志" v-if="!isBusiness && !formField.FF_BusinessFieldID">
        <el-input v-model="formField.FF_DisplayName"></el-input>
      </el-form-item>
      <el-form-item label="映射代码" v-if="!isBusiness">
        <el-input v-model="formField.FF_Code"></el-input>
      </el-form-item>
      <el-form-item label="发起时必填" v-if="!isBusiness && !formField.FF_BusinessFieldID">
        <el-checkbox v-model="formField.FF_Require" />
      </el-form-item>
      <el-form-item label="列表中显示" v-if="!isBusiness">
        <el-checkbox v-model="formField.FF_InList" />
      </el-form-item>
      <div v-for="(prop, index) in formField.props" :key="index">
        <el-form-item :label="prop.FLPR_Name" v-if="isBusiness || (!isBusiness && !formField.FF_BusinessFieldID)">
          <propConfig v-model="formField.props[index]" :isBusiness="isBusiness" />
        </el-form-item>
      </div>
      <el-divider>组件权限配置</el-divider>
      <el-form-item label-width="0">
        <el-table :data="formField.steps">
          <el-table-column label="节点名称">
            <template slot-scope="scope">
              <span>{{ scope.row.FLS_Name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="权限类型">
            <template slot-scope="scope">
              <span>{{ scope.row.TypeDesc }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100px">
            <template slot="header">
              <el-button size="medium" type="text" slot="reference" icon="el-icon-plus"
                @click="addStepVis = true"></el-button>
            </template>
            <template slot-scope="scope">
              <el-button icon="el-icon-delete" @click="removeStep(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="方法组件" v-if="isBusiness">
        <el-checkbox v-model="formField.BFF_InAction" />
      </el-form-item>
      <el-form-item v-if="formField.BFF_InAction" label-width="0">
        <el-table :data="formField.Actions">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="绑定方法">
            <template slot-scope="scope">
              <span>{{ scope.row.BFA_Name }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100px">
            <template slot="header">
              <el-popover placement="right" width="200" v-model="addActionVis" trigger="click">
                <div v-for="action in actions" :key="action.BFA_ID" style="margin: 5px">
                  <el-button @click="doAddAction(action)">
                    {{ action.BFA_Name }}
                  </el-button>
                </div>
                <el-button type="text" slot="reference" icon="el-icon-plus">
                  添加
                </el-button>
              </el-popover>
            </template>
            <template slot-scope="scope">
              <el-button icon="el-icon-delete" @click="doRemoveAction(scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>


    <el-dialog :visible.sync="addStepVis" width="360px" title="添加组件权限" append-to-body @open="newFieldStep = {}">
      <el-form size="small" label-width="80px" label-position="right" v-if="formField">
        <el-form-item label="权限类型" clearable>
          <el-select v-model="newFieldStep.FFS_Type" :filterable="true">
            <el-option v-for="type in fieldStepTypes" :key="type.EnumValue" :label="type.Description"
              :value="type.EnumValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指定节点">
          <el-select v-model="newFieldStep.FFS_FlowStepGuid" :filterable="true" clearable>
            <el-option v-for="step in approveSteps" :key="step.FLS_Guid" :label="step.FLS_Name"
              :value="step.FLS_Guid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addStep()">添加</el-button>
          <el-button type="text" @click="addStepVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import propConfig from '@/views/web/flowManage/components/formField/config/propConfig.vue'
export default {
  components: {
    propConfig,
  },
  props: ['value', 'isBusiness', 'actions', 'steps', 'fieldStepTypes'],
  data: function () {
    return {
      newFieldStep: {},
      formField: null,
      addActionVis: false,
      addStepVis: false,
    }
  },
  watch: {
    value: function (val) {
      this.formField = val
    },
  },
  computed: {
    approveSteps() {
      return this.isBusiness ? [] : this.steps.filter((x) => x.FLS_Type == 3)
    }
  },
  methods: {
    addStep() {
      if (this.formField.FF_Require) {
        this.$message('该组件发起时必填，无法做字段限制')
        return
      }
      if (!this.newFieldStep.FFS_Type) {
        this.$message('请选择限制类型')
        return
      }
      if (!this.newFieldStep.FFS_FlowStepGuid) {
        this.$message('请选择审核节点')
        return
      }
      if (this.formField.steps.find(x => x.FFS_FlowStepGuid == this.newFieldStep.FFS_FlowStepGuid && x.FFS_Type == this.newFieldStep.FFS_Type)) {
        this.$message('列表中已存在该审核节点')
        return
      }
      this.newFieldStep.FFS_FlowFieldGuid = this.formField.FF_Guid
      this.newFieldStep.FLS_Name = this.steps.find(x => x.FLS_Guid == this.newFieldStep.FFS_FlowStepGuid).FLS_Name
      this.newFieldStep.TypeDesc = this.fieldStepTypes.find(x => x.EnumValue == this.newFieldStep.FFS_Type).Description
      this.formField.steps.push(this.newFieldStep)
      this.newFieldStep = {}
      this.addStepVis = false
    },
    removeStep(index) {
      this.formField.steps.splice(index, 1)
    },
    addOption(prop) {
      if (!prop.Options) {
        prop.Options = []
      }
      prop.Options.push({ Text: '' })
      this.$forceUpdate()
    },
    removeItem(prop, index) {
      prop.Options.splice(index, 1)
      this.$forceUpdate()
    },
    doAddAction(action) {
      if (!this.formField.Actions) {
        this.formField.Actions = []
      }
      this.formField.Actions.push({
        BFFA_ActionGuid: action.BFA_Guid,
        BFFA_FieldGuid: this.formField.BFF_Guid,
        BFA_Name: action.BFA_Name,
      })
    },
    doRemoveAction(index) {
      if (!this.formField.RemoveActions) {
        this.formField.RemoveActions = []
      }
      this.formField.RemoveActions.push(this.formField.Actions[index])
      this.formField.Actions.splice(index, 1)
    },
  },

  mounted: function () { },
}
</script>
<style scoped>
.select-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
</style>
